// 弹性盒相关
.f {
  display: flex;
}

.f-w {
  display: flex;
  flex-wrap: wrap;
}

// 行翻转
.f-fd-r {
  display: flex;
  flex-direction: row-reverse;
}

// 列翻转
.f-fd-c-r {
  display: flex;
  flex-direction: column-reverse;
}

// 行布局水平居中
.f-jc {
  display: flex;
  justify-content: center;
}

// 在所在行水平居后
.f-jc-e {
  display: flex;
  justify-content: flex-end;
}

// 在所在行水平两边展开左右不留空隙
.f-jc-sb {
  display: flex;
  justify-content: space-between;
}

// 在所在行水平水平靠后垂直居中
.f-ai-jc-e {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

// 在所在行水平两边展开左右不留空隙垂直居中
.f-ai-jc-sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

// 在所在行水平两边展开左右留中间空隙的一半空隙垂直居中
.f-ai-jc-sa {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

// 在所在行水平两边展开左右留中间空隙的一半空隙
.f-jc-sa {
  display: flex;
  justify-content: space-around;
}

// 在所在行水平两边展开所有空隙都一致
.f-jc-se {
  display: flex;
  justify-content: space-evenly;
}

// 行布局垂直居中
.f-ai {
  display: flex;
  align-items: center;
}

// 行布局垂直水平居中
.f-jc-ai {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 在所在行垂直居后
.f-ai-e {
  display: flex;
  align-items: flex-end;
}

// 垂直居中
.ai {
  align-items: center;
}

//整个盒子垂直居中(一行时两个垂直居中一致)
.ac {
  align-content: center;
}

//整个盒子垂直居前
.ac-s {
  align-content: flex-start;
}

//整个盒子垂直居后
.ac-e {
  align-content: flex-end;
}

//在所在列垂直居中
.ji {
  justify-items: center;
}

//在所在列垂直居前
.ji-s {
  justify-items: flex-start;
}

//在所在列垂直居后
.ji-e {
  justify-items: flex-end;
}

.f-1 {
  flex: 1
}

// 列布局
.f-fd {
  display: flex;
  flex-direction: column;
}

// 列布局水平居中
.f-fd-ai {
  display: flex;
  flex-direction: column;
  align-items: center;
}

// 列布局水平居后
.f-fd-ai-e {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

// 列布局垂直居中
.f-fd-jc {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

// 列布局垂直居后
.f-fd-jc-e {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

// 列布局垂直水平居中
.f-fd-jc-ai-c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
